<template>
  <view class="page">

    <com-arrowLeft></com-arrowLeft>

    <view class="background-box">
      <view class="frosted"></view>
      <view class="circle circle1"></view>
      <view class="circle circle2"></view>
      <image class="image" :src="dataList?.picList[0].smallPicurl" mode="widthFix" />
      <view class="content">
        <view class="title">
          <text>{{ dataList?.theme }}</text>
        </view>
        <view class="time">
          <text>{{ dataList?.day }}推荐</text>
        </view>
        <view class="description">
          <text>{{ dataList?.description }}</text>
        </view>
      </view>
    </view>

    <view class="main">

      <view class="head">
        <text>共{{ dataList?.picList?.length }}张，{{ dataList?.view_count }}人看过</text>
      </view>

      <view class="list">
        <view @click="goPreview(item._id)" class="item" v-for="item in dataList?.picList" :key="item._id">
          <image class="image" :src="item.smallPicurl" mode="aspectFill" lazy-load />
        </view>
      </view>

      <com-backTop :fixed="fixed"></com-backTop>

    </view>

  </view>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { API } from "@/services/api";
import { goHome } from '@/utils/utils';
import { useClassListStore } from "@/store";
const ClassListStore = useClassListStore();

const subjectId = ref(''); // 专题推荐 ID
const dataList: any = ref(null); // 数据列表
const page = ref(1); // 页码
const isLoading = ref(false); // 加载状态
const isHasMore = ref(false); // 是否有更多数据可加载
const isEmpty = ref(true); // 数据是否为空

const fixed = ref(false); // 刷新、返回顶部 按钮的显示

// 
onLoad((options: any) => {
  if (Object.keys(options).length === 0) {
    console.log('~~~页面加载失败：未接收到任何参数');
    goHome();
    return;
  }

  const { id } = options;
  subjectId.value = id;
  getData();
});

// 
onPullDownRefresh(() => {
  onRefresh();
});

// 
onReachBottom(() => {
  if (isHasMore.value) getData();
});

// 
onPageScroll((e) => {
  fixed.value = e.scrollTop > 200;
});

// 
const onRefresh = () => {
  dataList.value = null;
  ClassListStore.clearList();
  getData();
};

// 
const getData = () => {
  isLoading.value = true;
  API.subjectDetail(subjectId.value)
    .then((res: any) => {

      dataList.value = res.data;
      isLoading.value = false;
      ClassListStore.setList(dataList.value.picList);

      // let newList = [...dataList.value];
      // if (page.value === 1) newList = [];
      // dataList.value = newList.concat(res.data || []);
      // isLoading.value = false;
      // isHasMore.value = res.data && res.data.length >= 12;
      // isEmpty.value = dataList.value.length <= 0;
      // page.value++;
    })
    .catch(() => {
      goHome();
      isLoading.value = false;
      isHasMore.value = false;
      isEmpty.value = true;

    })
};

// 
const goPreview = (id: string) => {
  uni.navigateTo({
    url: `/pages/pkgB/typePreview/index?id=${id}`
  })
};

</script>


<style lang="scss" scoped>
@use "style.scss";
</style>